<template>
	<view class="actionSheet_box">
		<view v-if="showTitle" class="actionSheet_item">
			<text class="actionSheet_item_txt actionSheet_title">{{title}}</text>
		</view>
		<view v-for="(item,index) in selectItems" :key="index" class="actionSheet_item actionSheet_item_border" @click.stop="select(item,index)">
			<text class="actionSheet_item_txt">{{item}}</text>
		</view>
		<view class="actionSheet_fgx"></view>
		<view class="actionSheet_item" @click="actionSheetCancel">
			<text class="actionSheet_item_txt">取消</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'UniPopupActionSheet',
		inject: ['popup'],
		props: {
			items: {
				type: Array,
				default: () => []
			},
			showTitle: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: '是否删除该条信息？'
			}
		},
		data() {
			return {
				selectItems: [], // 各项
				actionTitle: '', //
			}
		},
		/**
		 * 监听 属性变化
		 */
		watch: {
			title(newVal) {
				console.log(newVal);
				this.actionTitle = newVal;
			},
			items: {
				handler(newVal) {
					if (newVal != null && newVal.length > 0) {
						this.selectItems = newVal;
					}
				},
				immediate: true //对象内部的属性监听，也叫深度监听
			}
		},
		created() {},
		methods: {
			/**
			 * 选择内容
			 */
			select(item, index) {
				this.$emit('select', {
					item,
					index
				}, () => {
					this.popup.close()
				})
			},
			/**
			 * 关闭窗口
			 */
			actionSheetCancel() {
				this.popup.close()
			}
		}
	}
</script>
<style scoped>
	/*********弹框************/
	.actionSheet_box {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		background-color: #FFFFFF;
		justify-content: center;
	}

	.actionSheet_title {
		font-size: 13px;
		color: #666;
	}

	.actionSheet_fgx {
		height: 5px;
		background-color: #F7F7F7;
	}

	.actionSheet_item {
		flex-direction: row;
		align-items: center;
		flex: 1;
		padding: 15px 0;
		justify-content: center;
	}

	.actionSheet_item_border {
		border-bottom-width: 1px;
		border-bottom-color: #F7F7F7;
	}

	.actionSheet_item_txt {
		font-size: 15px;
		color: #333;
	}

	.actionSheet_cancel {
		font-size: 15px;
		color: #666666;
	}
</style>
